<template>
  <div class="silde">
    <el-carousel :interval="4000" :type="card" height="213">
      <el-carousel-item v-for="(item, index) in banner" :key="index"><img :src="item.imageUrl"
          @click="playThisMusic(item)" /></el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import axios from '@/request/request'
export default {
  name: 'Silde',
  data() {
    return {
      banner: [],
      bodyRef: null,
      card: 'card'
    }
  },
  created() {
    this.getBanner()
  },
  mounted() {
    window.addEventListener('resize', this.windowResize)
  },
  methods: {
    windowResize() {
      if (document.body.clientWidth < 800) {
        this.card = ''
      } else {
        this.card = 'card'
      }
    },
    async getBanner() {
      const { data: res } = await axios.get('/banner?type=0')
      if (res.code == 200) {
        this.banner = res.banners
      }
    },
    async playThisMusic(item) {
      if (item.targetType !== 1) return
      const { data: res } = await axios.get(`/song/detail?ids=${item.targetId}`)
      if (res.code == 200) {
        res.songs[0].dt = this.format(res.songs[0].dt)
        this.$store.dispatch('audio/getSongUrl', res.songs[0])
      }
    },  // 格式化歌曲毫秒数
    format(dt) {
      let m = parseInt(dt / 1000 / 60)
      let s = ((dt / 1000) % 60).toFixed(0)
      if (m < 10) {
        m = '0' + m
      }
      if (s < 10) {
        s = '0' + s
      }
      return m + ':' + s
    }
  }
}
</script>

<style lang="less" scoped>
@media (max-width: 768px) {
  /deep/ .el-carousel__item img {
    height: 100%;
  }
}

.silde {
  // position: absolute;
  // top: 0;
  // left: 50%;
  // transform: translateX(-50%);
  width: 100%;

  /deep/ .el-carousel__mask {
    display: none;
  }

  /deep/ .el-carousel {
    height: 250px;
  }

  /deep/ .el-carousel__container {
    height: 213px;
  }
}

/deep/ .el-carousel__item {
  height: 213px;
}

/deep/ .el-carousel__item img {
  width: 100%;
  // height: 100%;
}

/deep/ .el-carousel__arrow--right {
  opacity: 0 !important;
}

/deep/ .el-carousel__arrow--left {
  opacity: 0 !important;
}

/deep/ .el-carousel__button {
  width: 0.5vw;
  height: 0.5vw;
  border-radius: 50%;
}
</style>